<template>
	<div class="context">
		<div class="center">
			<div class="xi">
				<div class="yuan">3</div>
				<div class="zho">
					{{ this.$route.query.i }}
				</div>
			</div>
			<!-- 地图区域 -->
			<div class="tu">
				<img :src="getImgUrl(list)" alt="" />
			</div>
		</div>
	</div>
</template>

<script>
import { coffeeMap } from "@/api/index"
export default {
	data() {
		return {
			list: ''
		}
	},
	created() {
		coffeeMap(sessionStorage.getItem("coffeetitle")).then((res) => {
			if (res.data.code == 200) {
				// console.log(res.data.data.coffeeMap);
				this.list = res.data.data.coffeeMap
			}

		})
	},
	methods: {

		getImgUrl(img) {
			return this.montageImgUrl(img)
		},
	}
}
</script>

<style scoped>
.context {
	width: 100%;
	height: 6rem;
	display: flex;
	justify-content: center;
	background-color: #f0eff5;
}
.center {
	width: 98%;
	text-align: center;
}
.xi {
	width: 100%;
	margin-top: 0.05rem;
	display: flex;
}
.xi .yuan {
	width: 0.16rem;
	height: 0.16rem;
	margin-left: 0.1rem;
	font-weight: 700;
	text-align: center;
	line-height: 0.16rem;
	border-radius: 50%;
	margin-top: 0.05rem;
	border: 1px solid black;
}

/* 中间区域 */
.xi .zho {
	height: 100%;
	line-height: 0.3rem;
	padding-left: 5px;
	font-weight: 700;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
}
/* 地图区域  */
.tu {
	width: 100%;
	height: 3rem;
}
.tu img {
	width: 100%;
	height: 3rem;
}
</style>